<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="/js/jquery-3.5.1.js"></script>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<style>
    html {
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
    }
    #btnQuery{
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 14px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 9px;

    }

</style>

<body>
<div>
    <h1>
        借书列表
    </h1>
</div>
<div>
    <table >
<!--        搜索框的实现-->

        <tr>
            <td width="2%">&nbsp;</td>
            <td width="96%">
                <fieldset>
                    <legend>查询条件</legend>
                    <table class="table" >
                        <tr>
                            <td colspan="8" align="center">
                                <input type="radio" name="query" value="0" onclick="borrowerInfo()" checked/>全部 &nbsp;&nbsp;
                                <input type="radio" name="query" value="1" onclick="repay()"/>已归还 &nbsp;&nbsp;
                                <input type="radio" name="query" value="2" onclick="noRepay()"/>未归还 &nbsp;&nbsp;
                                <input type="radio" name="query" value="3" onclick="weekRepay()"/>最近一周需归还 &nbsp;&nbsp;
                                请输入书名:&nbsp;&nbsp;<input class="text" type="text" id="keyword" name="keyword"/>
                                <input type="button" id="btnQuery" value="搜索"  onclick="sel() "/></td>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </td>
            <td width="2%">&nbsp;</td>
        </tr>

        <tr>
            <td width="2%">&nbsp;</td>
            <td width="96%">
                <table class="table">
                    <tr>
                        <td colspan="2">
                            <form action="" method="">
                                <table  class="table" id="tbRecord" >
                                    <thead>
                                    <tr>
                                        <th>会员名称</th>
                                        <th>书籍名称</th>
                                        <th>借阅时间</th>
                                        <th>待还时间</th>
                                        <th>金额(元)</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody id="borrowInfo">




                                    </tbody>
                                </table>
                            </form>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="2%">&nbsp;</td>
        </tr>
    </table>
    <tr>

    </tr>
</div>

</body>
</html>

<script>

    var borObj;//JSON字符串
    var keyword = document.getElementById("keyword");
    var request = new XMLHttpRequest();
    var url = "/borrowInfo.bor";
    request.open("Get",url);
    request.onreadystatechange = function (){
        if (request.readyState==4){
            console.log(request.responseText);

             borObj = JSON.parse(request.responseText);
            for (let j = 0; j < borObj.length; j++) {
                    let str = "<td>" + borObj[j].userName + "</td>";
                    str += "<td>" + borObj[j].bookName + "</td>";
                    str += "<td>" + borObj[j].borDate + "</td>";
                    str += "<td>" + borObj[j].repayDate + "</td>";
                    str += "<td>" + borObj[j].price + "</td>";
                    if (borObj[j].state=="已逾期"){
                    str += "<td style='color: red; align-content: center' >"+ borObj[j].state + "</td>";
                    }else {
                    str += "<td style='align-content: center'>"+ borObj[j].state + "</td>";
                    }
                    let tr = $("<tr>" + str + "</tr>");
                    $("#borrowInfo").append(tr);
            }
        }
    }
    request.send(null);

//搜索书名
    function sel(){
        $("#borrowInfo").empty();
        for (let j = 0; j < borObj.length; j++) {
            if(keyword.value==borObj[j].bookName){
                    let str = "<td>" + borObj[j].userName + "</td>";
                    str += "<td>" + borObj[j].bookName + "</td>";
                    str += "<td>" + borObj[j].borDate + "</td>";
                    str += "<td>" + borObj[j].repayDate + "</td>";
                    str += "<td>" + borObj[j].price + "</td>";
                if (borObj[j].state=="已逾期"){
                    str += "<td style='color: red; align-content: center' >"+ borObj[j].state + "</td>";
                }else {
                    str += "<td style='align-content: center'>"+ borObj[j].state + "</td>";
                }
                    let tr = $("<tr>" + str + "</tr>");
                    $("#borrowInfo").append(tr);
            }
        }
    }

//全部按钮
    function borrowerInfo(){
        keyword.value="";
        $("#borrowInfo").empty();
        for (let j = 0; j < borObj.length; j++) {
                let str = "<td>" + borObj[j].userName + "</td>";
                str += "<td>" + borObj[j].bookName + "</td>";
                str += "<td>" + borObj[j].borDate + "</td>";
                str += "<td>" + borObj[j].repayDate + "</td>";
                str += "<td>" + borObj[j].price + "</td>";
            if (borObj[j].state=="已逾期"){
                str += "<td style='color: red; align-content: center' >"+ borObj[j].state + "</td>";
            }else {
                str += "<td style='align-content: center'>"+ borObj[j].state + "</td>";
            }
                let tr = $("<tr>" + str + "</tr>");
                $("#borrowInfo").append(tr);
        }
    }

//未归还按钮
    function noRepay(){
        keyword.value="";
        $("#borrowInfo").empty();
        for (let j = 0; j < borObj.length; j++) {
            if (borObj[j].state=="未归还"){
                let str = "<td>" + borObj[j].userName + "</td>";
                str += "<td>" + borObj[j].bookName + "</td>";
                str += "<td>" + borObj[j].borDate + "</td>";
                str += "<td>" + borObj[j].repayDate + "</td>";
                str += "<td>" + borObj[j].price + "</td>";
                str += "<td style='align-content: center'>"+ borObj[j].state + "</td>"
                let tr = $("<tr>" + str + "</tr>");
                $("#borrowInfo").append(tr);
            }
        }
    }

//已归还按钮
    function repay(){
        keyword.value="";
        $("#borrowInfo").empty();
        for (let j = 0; j < borObj.length; j++) {
            if (borObj[j].state=="已归还"){
                let str = "<td>" + borObj[j].userName + "</td>";
                str += "<td>" + borObj[j].bookName + "</td>";
                str += "<td>" + borObj[j].borDate + "</td>";
                str += "<td>" + borObj[j].repayDate + "</td>";
                str += "<td>" + borObj[j].price + "</td>";
                str += "<td style='align-content: center'>"+ borObj[j].state + "</td>"
                let tr = $("<tr>" + str + "</tr>");
                $("#borrowInfo").append(tr);
            }
        }
    }


//最近一周需归还按钮
    function weekRepay(){
        keyword.value="";
        $("#borrowInfo").empty();
        for (let j = 0; j < borObj.length; j++) {
            let repayTime = Date.parse(borObj[j].repayDate)
            let nowTime = new Date().getTime();
            let difDate = repayTime-nowTime;
            if (difDate>0&&(difDate/(60*60*24*1000))<7){
                let str = "<td>" + borObj[j].userName + "</td>";
                str += "<td>" + borObj[j].bookName + "</td>";
                str += "<td>" + borObj[j].borDate + "</td>";
                str += "<td>" + borObj[j].repayDate + "</td>";
                str += "<td>" + borObj[j].price + "</td>";
                str += "<td style='align-content: center'>"+ borObj[j].state + "</td>"
                let tr = $("<tr>" + str + "</tr>");
                $("#borrowInfo").append(tr);
            }
        }
        console.log(new Date(Date.parse(borObj[0].repayDate)))
    }


</script>